<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <script src="Browser.js"> </script>
      <style>
         /* Examples shared styles */
         .ExampleHeader,.ExampleName,.ExampleShort,.ExampleDesc,.ExampleErr { max-height:999999px; }
         .ExampleHeader { font:normal 12px Arial; color:blue; }
         .ExampleHeader b { color:#800; }
         .ExampleHeader i { font-style:normal; font-weight:bold; color:black; }
         .ExampleHeader u { font-weight:bold; text-decoration:none; padding:0px 2px 0px 2px; color:#0B0; }
         .ExampleName { font:bold 30px Arial; padding:5px 0px 5px 0px; }
         .ExampleShort { font:italic 15px Arial; margin-bottom:10px; padding-top:5px; }
         .ExampleDesc { font:14px/17px Arial; margin:0px 5px 10px 5px; padding:5px; border:1px solid #AAA; }
         .ExampleErr { font:14px/30px Arial; margin:50px auto 10px auto; padding:5px; border:1px solid black; color:red; width:800px; text-align:center; display:none; }
         .ExampleBorder { margin:0px 5px 0px 5px; clear:both; zoom:1; }
         .ExampleDesc ul { padding:0px 0px 0px 15px; margin:10px 0px 0px 0px; }
         .ExampleDesc li { padding-bottom:8px; line-height:18px; }
         .ExampleDesc h4 { font:bold 15px/20px Arial; margin:0px; padding:0px 6px 0px 6px; background:#87DAE5; border:1px solid #888; color:black; display:inline; }
         .ExampleDesc u { font-size:11px; text-decoration:none; }
         .ExampleDesc .Link { text-decoration:underline; color:blue; cursor:pointer; }
         @media (max-height:800px) { 
            .ExampleDesc { font-size:13px; line-height:15px; margin:0px 5px 5px 5px; padding:3px 5px; } 
            .ExampleDesc br { display:none; }
            .ExampleName { font:20px Arial; padding:0px; }
            .ExampleShort { font-size:13px; }
            }
      </style>
   </head>
   <body>
      <center class="ExampleHeader"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <center class="ExampleName">File browser</center>
      <center class="ExampleShort">Demonstration of manipulating files with TreeGrid</center>
      <div class="ExampleErr">
         <script> if(location.protocol=="file:") document.write("<style>.ExampleDesc, .ExampleBorder {display:none;} .ExampleErr { display:block; } </style>"); </script>
         Do <b>not</b> run this file locally!<br />Run it from your local or remote web http server where is installed IIS and ASP.NET (1.0, 1.1, 2.0, 3.0, 3.5, 4.0, 4.5, ...).<br>
      </div>
      <div class="ExampleDesc">
         The files can be shown in directories or as direct list, also various sorting and filtering is possible.<br />
         The files can be added, moved, deleted, copied, edited and viewed by clicking to left panel or by right click popup menu.<br />
         <i>The sample directories and files are located in <b>/TestFiles</b> directory and are independent on the examples distribution so they can be modifed or deleted without problems.</i><br />
         The changes are saved after click to Save button in grid or the editing changes by Save button in right view.<br />
      </div>
      <div class="ExampleDesc">
         <i>Source files:</i> <h4>Browser.html</h4> (this html page), <a href="BrowserDef.xml" target="_blank"><h4>BrowserDef.xml</h4></a> (static XML layout), 
         <a href="BrowserData.aspx" target="_blank"><h4>BrowserData.aspx</h4></a> (server script generates XML data),
         <a href="BrowserUpload.aspx" target="_blank"><h4>BrowserUpload.aspx</h4></a> (server script saves XML changes),
         <a href="BrowserUploadEdit.aspx" target="_blank"><h4>BrowserUploadEdit.aspx</h4></a> (server script saves edited files),
         <h4>Browser.js</h4> (support JavaScript code), <a href="TestFiles/" target="_blank"><h4>TestFiles/</h4></a> (directory with the sample source files)
      </div>
      <div class="ExampleBorder">
         <table style='width:100%;'>
            <tr>
               <td style='width:360px;'>
                  <div class="ExampleMain" id='Browser' style='width:360px; height:600px;'>
                     <bdo DebugTag='debug' Upload_Debug='in,out' Layout_Url="BrowserDef.xml" Data_Url='BrowserData.aspx' Upload_Url='BrowserUpload.aspx'></bdo>
                  </div>
               </td>
               <td style='height:100%'>
                  <iframe id='View' scrolling='yes' width='100%' height='600'></iframe>
                  <textarea id='Edit' style='border-width:2px;background:white;width:100%;height:600px;display:none;' onkeyup='OnEditChanged(event)'></textarea>
                  <div id='Save' style='margin-top:-28px;margin-right:28px;text-align:right;height:25px;overflow:hidden;display:none;position:relative;z-index:100;'>
                     <button style='height:22px;' onclick='SaveEdit()'>Save</button>
                  </div>
               </td>
            </tr>
         </table>
      </div>
      <div style='font:10px Arial;margin-top:5px;'>Shows IO communication with server when uploading changes</div>
      <div id='debug' style='background:#DDD; height:100px; border:1px solid black; padding-left:5px; overflow:auto;'></div>
      <script>
      var FilePath = "TestFiles/";             // Path for opening URLs, the path is also set in server script
      var FileSave = "BrowserUploadEdit.aspx"; // Path for uploading changes in files
      </script>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialCS\s*=\s*(\d+)/), TGIndex = 1;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialCSBrowser", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialCS="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>

   </body>
</html>